<script setup lang="ts">
import ChannelNav from "@/components/ChannelNav.vue";
import ArticleList from "@/components/ArticleList.vue";
import { onMounted, ref } from "vue";
import { getChannelAPI } from "@/api/channel";
import type { ChannelItem } from "@/types";

onMounted(() => {
  // 获取频道数据
  getChannel();
});
const updateActiveId = (id: number) => {
    activeId.value = id
}
const channelList = ref<ChannelItem[]>([]);
// 激活id
const activeId = ref(0);

const getChannel = async () => {
  const result = await getChannelAPI();
  channelList.value = result.channels; // 赋值列表
  activeId.value = result.channels[0].id; // 把第一个频道的id作为激活的选项
};
</script>

<template>
  <!-- 频道 -->
  <ChannelNav :active-id="activeId" :channels="channelList" 
      @update-active-id="updateActiveId"></ChannelNav>

  <!-- 列表 -->
  <ArticleList></ArticleList>
</template>
